<!-- 
	name: 悬浮菜单
	version: v0.0.1
	update_time: 2020-6-25 
 -->
<template>
	<view>
		<!-- 遮罩 -->
		<!-- <view class="mask" v-if="show" @tap="show = false" @touchmove.stop.prevent></view> -->
		<!-- 按钮 -->
		<view class="major-box" :style="{ top: top + 'px' }">
			<view class="click-btn" @click="clickBtn" draggable="true" @touchstart="touchstart" @touchmove.stop.prevent="touchmove">
				<image src="../../static/indexImage/calculation.png" mode=""></image>
				<text>计算收益</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false, // 是否显示
			top: 500, // 顶端距离
			deviationTop: 0, // 偏移量
			windowHeight: uni.getSystemInfoSync().windowHeight // 视图高度
		};
	},
	methods: {
		// 点击按钮
		clickBtn: function() {
			this.$emit('toShow', true)
		},
		// 拖动开始，记录一下偏移量
		touchstart: function(e) {
			var touch = e.touches[0] || e.changedTouches[0];
			this.deviationTop = touch.clientY - this.top;
			// console.log(this.deviationTop);
		},
		// 上下拖动时
		touchmove: function(e) {
			var touch = e.touches[0] || e.changedTouches[0];
			var top = touch.clientY;
			top = top - this.deviationTop;
			if (top < 0) {
				top = 0;
			}
			if (top > this.windowHeight - 40) {
				top = this.windowHeight - 40;
			}
			this.top = top;
			return false;
		}
	}
};
</script>

<style lang="scss" scoped>
/* 遮罩 */
.mask {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.4);
}
/* 总盒子 */
.major-box {
	border: 1px 0 solid;
	z-index: 99;
	position: fixed;
	width: 100%;
	/* height: 0px; */
	left: 650rpx;
	transition: left 0.5s;
	overflow: hidden;
}
/* 展开时 */
.major-box.show {
	left: 110rpx;
}

.click-btn,
.nav-box {
	float: left;
}
/* 按钮样式 */
.nav-box {
	background-color: #fff;
	border-radius: 0 0 0 5px;
}
.click-btn {
	width: 100upx;
	background-color: #FFFFFF;
	border: 2upx solid #F7837D;
	color: #fff;
	border-radius: 50%;
	height: 100upx;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	color: $red;
	font-size: 20upx;
	image {
		width: 30upx;
		height: 30upx;
	}
}
.click-btn view {
	padding-left: 15rpx;
}

/* 按钮盒子 */
.nav-box {
	width: 500rpx;
	padding: 30rpx 20rpx 20rpx 20rpx;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
}
.nav-btn {
	flex: 1;
	border: 0px #000 solid;
	min-width: 150rpx;
	padding: 12rpx 0;
	padding-bottom: 20rpx;
}
.nav-icon {
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	display: inline-block;
	font-size: 15px;
	border-radius: 50%;
	background-color: #666;
	color: #fff;
}
.nav-text {
	font-size: 12px;
	font-weight: bold;
	margin-top: 8rpx;
}
</style>
